<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米官网</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 100%;
				height: 50px;
				background-color: black;
			}
			.box2{
				width: 100p%;
				height: 50px;
				border: 1px solid blue;
				margin: auto;
			}	
			.box3{
				width: 900px;
				height: 100%;
				background-color: purple;
				float: left;
			}
			.box4{
				width: 200px;
				height: 100%;
				background-color: pink;
				float: right;
			}
			.box5{
				width: 1200px;
				height: 100px;
				border: 1px solid red;
				margin: 15px auto;
			}
			.box5 .box6{
				width: 100px;
				height: 100%;
				border: 1px solid black;
				float: left;
			}
			.box5 .box7{
				width: 700px;
				height: 100%;
				border: 1px solid black;
				margin: auto;
			}
			.box5.box8{
				width: 200px;
				height: 100px;
				border: 1px solid black;
				float: right;
			}
			.box9{
				width: 800%;
				height: 500px;
				border: 1px solid blue;
				margin: 15px auto;
			}
			.box10{
				width: 500px;
				height: 300px;
				border: 1px solid skyblue;
				float: left;
			}
			.box11{
				width: 500px;
				height: 300px;
				padding: 100px;
				left: 234px;
				background-color: aqua;
				float: right;
			}
			.box12{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				position: relative;
				margin: auto;
				float: left;	
			}
			.box12 .boxa{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				position: relative;
				left: 25px;
				float: left;
			}
			.box12 .boxb{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				position: relative;
				left: 160px;
				float: left;
			}
			.box13{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				position: relative;
				float: left;
			}
			.box14{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				position: relative;
				float: left;
			}
			.box15{
				width: 300px;
				height: 300px;
				border: 1px solid black;
				position: relative;
				margin: auto;
				float: left;	
			}
			.box16{
				width: 1200px;
				height: 300px;
				border: 1px solid green;
				margin:0 auto;
				overflow: hidden;
				bottom: 500px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3">3</div>
				<div class="box4">4</div>
		</div>
	</div>
	<div class="box5">
		<div class="box6">6</div>
		<div class="box7">7</div>
		<div class="box8">8</div>
	</div>
	<div class="box9">
		<div class="box10">
			<div class="box11">11</div>
	</div>
		</div>
	<div>
		<div class="box12">
			<div class="boxa">a</div>
			<div class="boxb">b</div>
			<div class="boxc">c</div>
			<div class="boxd">d</div>
			<div class="boxe">e</div>
			<div class="boxf">f</div>
		</div>
		<div class="box13">13</div>
		<div class="box14">14</div>
		<div class="box15">15</div>
	</div>
	<div class="box16">16</div>
	</body>
</html>
